<template>
	<Scroll :bgcolor='bgcolor' :scroll='scroll' :style='style' :id='id' :scrollbarClass='scrollbarClass'>
		<div :class='contentClass' :style="{minWidth: minWidth + 'px', minHeight: minHeight + 'px', ...contentStyle}">
			<slot></slot>
		</div>
	</Scroll>
</template>

<script setup>
	/* --------------------------- Sync Component --------------------------- */
	import Scroll from './scroll.vue'
	/* --------------------------- props --------------------------- */
	defineProps({
		//
		config 			: { type:Object, default:{  } },
		//
		bgcolor 		: { type:[String, Boolean], default:({ config }) => config.bgcolor ?? 'bcf' },
		scroll			: { type:[String, Boolean],	default:({ config }) => config.scroll ?? 'oxys' },
		scrollbarClass 	: { type:[String, Boolean],	default:({ config }) => config.scrollbarClass ?? 'scrollbar' },
		style			: { type:[Object, String], default:({ config }) => config.style },
		minWidth		: { type:Number, default: $config.pageMinWidth },
		minHeight		: { type:Number, default: $config.pageMinHeight },
		contentClass	: { type:String, default:({ config }) => config.contentClass },
		contentStyle	: { type:Object, default:({ config }) => config.contentStyle },
		id				: { type:String, default:({ config }) => config.id ?? 'scrollContent' },
	})
</script>